<template>
  <yt-page title="二道门信息管理" scroll class="two-door-page">
    <yt-card v-for="(item, index) of items" :key="index">
      <yt-cell label="企业名称" :value="item.enterpriseId.attributes.EnterpriseName"></yt-cell>
      <yt-cell label="卡口编号" :value="item.code"></yt-cell>
      <yt-cell label="推送时间">
        <span class="c-red">{{item.time}}</span>
      </yt-cell>
      <yt-cell label="厂内人员" :value="item.totalPerson"></yt-cell>
      <yt-cell label="厂内车辆" :value="item.totalVehicle"></yt-cell>
      <yt-collapse v-if="item.videos" v-model="item.videoActive" :list="[1]">
        <span slot="title">周边视频</span>
        <p v-for="(video, key) of item.videos" :key="key" @click="onPlay(video)">{{video.DeviceName}}</p>
      </yt-collapse>
      <yt-collapse v-model="item.active" :list="[1]">
        <span slot="title">人员明细</span>
        <table class="table">
          <thead>
            <tr>
              <td>部门名称</td>
              <td>人员数量</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(subItem, subIndex) of item.detailed" :key="subIndex">
              <td>{{subItem.department}}</td>
              <td>{{subItem.count}}</td>
            </tr>
          </tbody>
        </table>
      </yt-collapse>
    </yt-card>

  </yt-page>
</template>

<script>
import { commonApi } from '@/common/api/commonApi.js'
import { bridge } from '@/common/plugin/utils/bridge'
import _ from 'lodash'
export default {
  data() {
    return {
      active: false,
      items: []
    }
  },
  activated() {
    if (this.$router.$isBack) return
    this.initData()
    this.onSubscribe()
  },
  deactivated() {
    this.onUnsubscribe()
  },
  methods: {
    async initData() {
      let param = Object.assign(
        { equalTo: this.$route.query },
        { include: ['enterpriseId'] }
      )
      let entId = this.$route.query.enterpriseId
      let equalTo = entId
        ? { equalTo: { EnterpriseName: entId, EquipmentCode: '1' } }
        : { equalTo: { EquipmentCode: '1' } }
      let videoParam = Object.assign({ ...equalTo, exists: ['Coordinate'] })
      let p = [
        commonApi.search('measure_cate', param),
        commonApi.search('measure_video', videoParam)
      ]
      let [items, videos] = await Promise.all(p)

      // 摄像头型号不一致，地址需要转换
      videos.map(v => {
        v.DeviceNum
          ? (v.AddressIP = `http://218.92.104.98:8388/mag/hls/${
              v.DeviceNum
            }/0/live.m3u8`)
          : ''
      })

      let videosMap = _.groupBy(videos, 'EnterpriseName.id')
      this.items = items.map(v => {
        return {
          ...v,
          active: false,
          videoActive: false,
          videos: videosMap[v.enterpriseId.id]
        }
      })
    },
    async onSubscribe() {
      this.subscribe = commonApi.liveQuery('measure_cate')
      this.subscribe.on('update', object => {
        let index = this.items.findIndex(v => v.id === object.id)
        let curObj = this.items[index]
        if (index !== -1) {
          this.items.splice(index, 1, {
            id: object.id,
            ...curObj,
            ...object.attributes
          })
        }
      })
    },
    async onUnsubscribe() {
      this.subscribe.unsubscribe()
    },
    onPlay(video) {
      bridge.Play(video.AddressIP)
    }
  }
}
</script>

<style scoped lang="stylus">
>>> .yt-card-body
  padding 0

.table
  width 100%

  thead tr
    font-weight 500

  td
    text-align center

    .btn
      font-size 12px
      padding 3px 10px
      color #fff
      border-radius 10px

p
  padding 0 10px
</style>
